<template>
  <KrdPage :showTabBar="false">
    <view class="case-detail-container">
      <!-- 项目封面图 -->
      <image 
        :src="caseDetail.coverImage" 
        class="cover-image" 
        mode="aspectFill"
      />

      <!-- 项目名称 -->
      <view class="section">
        <view class="section-title">项目名称</view>
        <text class="section-content">{{ caseDetail.projectName }}</text>
      </view>

      <!-- 废水性质 -->
      <view class="section">
        <view class="section-title">废水性质</view>
        <text class="section-content">{{ caseDetail.wastewaterProperties }}</text>
      </view>

      <!-- 处理量 -->
      <view class="section">
        <view class="section-title">处理量</view>
        <text class="section-content">{{ caseDetail.treatmentCapacity }}</text>
      </view>

      <!-- 工程概况 -->
      <view class="section">
        <view class="section-title">工程概况</view>
        <text class="section-content">{{ caseDetail.projectOverview }}</text>
      </view>
    </view>
  </KrdPage>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import KrdPage from '@/components/KrdPage.vue';

// 定义案例详情数据结构
interface CaseDetail {
  id: string;
  coverImage: string;
  projectName: string;
  wastewaterProperties: string;
  treatmentCapacity: string;
  projectOverview: string;
}

// 初始化案例详情数据
const caseDetail = ref<CaseDetail>({
  id: '',
  coverImage: '',
  projectName: '',
  wastewaterProperties: '',
  treatmentCapacity: '',
  projectOverview: ''
});

// 页面加载时获取参数
onLoad((options) => {
  if (options?.id) {
    // 模拟获取案例详情数据
    getCaseDetail(options.id);
  }
});

// 模拟获取案例详情数据的方法
const getCaseDetail = (id: string) => {
  // 在实际应用中，这里会调用后端API获取数据
  // 这里使用模拟数据
  caseDetail.value = {
    id: id,
    coverImage: '/static/case1.jpg',
    projectName: '某某市污水处理厂',
    wastewaterProperties: '该污水处理厂主要处理城市生活污水，进水COD浓度约为300-400mg/L，BOD5浓度约为150-200mg/L，SS浓度约为200-300mg/L。',
    treatmentCapacity: '日处理量为10万吨/天',
    projectOverview: '该项目采用A2/O工艺，结合深度处理工艺，出水水质达到《城镇污水处理厂污染物排放标准》(GB18918-2002)一级A标准。工程总投资约2.5亿元，占地面积约150亩，服务人口约50万人。项目于2022年1月开工，2022年12月竣工投产，运行稳定，处理效果良好。'
  };
};
</script>

<style scoped>
.case-detail-container {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}

.cover-image {
  width: 100%;
  height: 400rpx;
  border-radius: 20rpx;
  margin-bottom: 40rpx;
}

.section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 2rpx solid #eee;
}

.section-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}
</style>